<template>
<div class = 'records'>
    <div class="base ">
        <div class="avatar">
            <img :src="base.avatar" :alt="caseInfo.baseInfo.patientName" width = '120px;' height= "150px;">
            <ul>
                <li>
                    <div class='name'>{{caseInfo.baseInfo.patientName}}</div>
                </li>
                <li>
                    <span class='gender'>{{caseInfo.baseInfo.sex===1?'男':'女'}}</span>
                    <span class='age'>{{caseInfo.baseInfo.birthday}}</span>
                </li>
                <li>
                    <span class='telephone'>{{caseInfo.baseInfo.phone}}</span>
                </li>
            </ul>
        </div>

        <div class="phone">
            <el-button type="primary" icon="el-icon-mobile-phone" @click = 'openIE'></el-button>
            <el-button type="primary" icon="el-icon-message"></el-button>
            <el-button type="primary" icon="el-icon-tickets"></el-button>
            <el-button type="primary" icon="el-icon-document"></el-button>
        </div>
        <ul class='baseDetail'>
            <li>姓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<span>{{caseInfo.baseInfo.patientName}}</span></li>
            <li>性 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<span>{{caseInfo.baseInfo.sex===1?'男':'女'}}</span></li>
            <li>年 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：<span>{{caseInfo.baseInfo.birthday}}</span></li>
            <li>就诊卡号：<span>{{caseInfo.baseInfo.medicare}}</span></li>
            <li>身份证号：<span>{{caseInfo.baseInfo.idCard}}</span></li>
            <li>联系电话：<span>{{caseInfo.baseInfo.phone}}</span></li>
            <li>手术名称：<span>{{caseInfo.mainAppointmentRel.operationName}}</span></li>
            <li>主刀医师：<span>{{caseInfo.mainAppointmentRel.doctorName}}</span></li>
            <li>手术时间：<span>{{caseInfo.mainAppointmentRel.visitDate}}</span></li>
        </ul>
    </div>
    <div class="allInfo" ref = 'allInfo'>
        <el-tabs v-model="activeTab" @tab-click="tabClick">
            <el-tab-pane name="baseInfo">
                <span class = 'tab' slot="label"> 基本信息</span>
                <base-info :caseInfo="caseInfo"></base-info>
            </el-tab-pane>
            <el-tab-pane name="surgeryRecord">
                <span class = 'tab' slot="label"> 手术记录</span>
                <surgery-path :appointment="{path: caseInfo.appointmentInfo.appointmentStatus}"></surgery-path>
                <surgery-record :appointmentRel="caseInfo.mainAppointmentRel" :appointment="caseInfo.appointmentInfo" :operationInfo="caseInfo.operationInfo?caseInfo.operationInfo:{}"></surgery-record>
            </el-tab-pane>
            <el-tab-pane name="medicalRecord">
                <span class = 'tab' slot="label"> 医疗档案</span>
                <medical-record :medicalRecord="caseInfo.medicalRecord"></medical-record>
            </el-tab-pane>
            <el-tab-pane name="followRecord">
                <span class = 'tab' slot="label"> 随访记录</span>
                <follow-record :patientId="caseInfo.appointmentInfo.patientId"></follow-record>
            </el-tab-pane>
            <el-tab-pane name="PEARecord">
                <span class = 'tab' slot="label"> 宣教记录</span>
                <pae-record :patientId="caseInfo.appointmentInfo.patientId"></pae-record>
            </el-tab-pane>
            <el-tab-pane name="messageRecord">
                <span class = 'tab' slot="label"> 短信记录</span>
                <message-record :patientId="caseInfo.appointmentInfo.patientId"></message-record>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>
<script>
import baseInfo from '@/yimiviews/case/baseInfo'
import surgeryRecord from '@/yimiviews/case/surgeryRecord'
import surgeryPath from '@/yimiviews/components/path'
import medicalRecord from '@/yimiviews/case/medicalRecord'
import followRecord from '@/yimiviews/case/followRecord'
import paeRecord from '@/yimiviews/case/PAERecord'
import messageRecord from '@/yimiviews/case/messageRecord'
import formCreater from '@/yimiviews/case/formCreater'
import { patienthistoryRead } from '@/api/appointmentManage/appointmentConfirm'
export default {
  components: { baseInfo, formCreater, surgeryRecord, surgeryPath, medicalRecord, followRecord, paeRecord, messageRecord },
  created() {
    this.getPatientHistory()
  },
  mounted() {
    this.setAppMainHeight()
  },
  data() {
    return {
      activeTab: 'baseInfo',
      base: {
        avatar: ''
      },
      caseInfo: {
        appointmentInfo: {},
        mainAppointmentRel: {},
        baseInfo: {},
        medicalInfo: {},
        medicalRecord: [],
        operationInfo: {}
      }
    }
  },
  methods: {
    tabClick(tab, event) {
    },
    openIE() {
      const url = location.origin + '/static/aa.html'
      window.location.href = 'openIE:' + url
    },
    getPatientHistory() {
      patienthistoryRead(this.$route.params.id).then(res => {
        if (res.data.data) {
          const resData = res.data.data
          if (resData.baseInfo) {
            resData.baseInfo.liveAreaId = resData.baseInfo.liveAreaId ? resData.baseInfo.liveAreaId.split(',') : []
            resData.baseInfo.birthAreaId = resData.baseInfo.birthAreaId ? resData.baseInfo.birthAreaId.split(',') : []
            resData.baseInfo.companyAreaId = resData.baseInfo.companyAreaId ? resData.baseInfo.companyAreaId.split(',') : []
            resData.baseInfo.refAreaId = resData.baseInfo.refAreaId ? resData.baseInfo.refAreaId.split(',') : []
          } else {
            // 没有基本信息的特殊情况处理
            resData.baseInfo = {}
          }
          this.caseInfo = resData
        }
      })
    },
    setAppMainHeight() {
      const bodyHeight = document.body.offsetHeight
      const appMainHeight = bodyHeight - 180
      this.$refs.allInfo.style.height = appMainHeight + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
.records{
    display: flex;
    height: 100%;
    box-sizing: border-box;
    .base{
        .avatar{
            position: relative;
            height:180px;
            padding: 15px 15px 15px 150px;
            img{
                position: absolute;
                left: 15px;
                top:15px;
            }
            ul,li{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li{
                padding:10px 0;
                .name{
                    font-size: 20px;
                    font-weight: bold;
                }
                .gender{
                    margin-right: 10px;
                }
            }
        }
        width: 300px;
        height: 100%;
        border-right: 1px solid #ddd;
        .phone{
            padding:10px 0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            text-align: center;
            .icon{
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
            }
        }
        ul.baseDetail{
            margin: 0;
            padding: 0;
            li{
                list-style: none;
                padding: 15px 0 15px 15px;
                margin: 0;
                border-bottom: 1px solid #ddd;
                span{
                    margin-left: 20px;
                }
            }
        }
    }

    .allInfo{
        flex: 1;
        padding: 0 20px;
        box-sizing: border-box;
        .tab{
            font-size: 20px;
            display: inline-block;
            height: 50px;
            line-height: 50px;
        }
    }

}
</style>
